<template>
<div>
  <div style="padding: 10px">
    <span style="width: 150px;display: inline-block;">
       <Select :datas="servers" v-model="currentServer" :deletable="false"/>
    </span>
    <span style="padding-left: 10px">
      操作系统：{{os.name}} {{os.arch}} {{os.version}}
    </span>
  </div>

  <div class="server-chart">
    <Chart :options="cpu"></Chart>
  </div>
  <div class="server-chart">
    <Chart :options="memory"></Chart>
  </div>
  <div class="server-chart">
    <Chart :options="disk"></Chart>
  </div>
</div>
</template>

<script>
import {ajax,format} from 'framework'
export default {
  name: "server",
  data(){
    return {
      itvHandler: 0,
      servers:[],
      currentServer:'',
      cpu: {},
      memory:{},
      disk:{},
      os:{}
    }
  },
  mounted(){
    this.itvHandler=setInterval(this.loadData,1000)
    ajax.get("server/list_servers").then(r => {
      this.servers = r.data
      this.currentServer = r.data[0]
    })
   // this.cpu=this.createV("CPU",{ratio:0})
  },beforeDestroy(){
    clearInterval(this.itvHandler)
  },methods:{
    loadData(){
      if(this.currentServer){
        ajax.get("server/status",{server:this.currentServer}).then(r=>{
          this.cpu=this.createV("CPU",r.data.cpu)
          this.memory=this.createV("Memory",r.data.memory)
          this.disk=this.createV("Disk",r.data.file)
          this.os=r.data.os
        })
      }

    },
    createV(name,data){
      let series={
        name: name,
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: function(a,b,c){
            return format(a,"##")+"%"
          }
        },
        data: [
          {
            value: data.ratio,
            name: name
          }
        ]
      }
      let formatter='{b} : {c}%'
      if(name=="Memory"||name=="Disk"){
        series.max=format(data.total.replace('GB',''),"##")
        series.data[0].value=data.used.replace('GB','')
        series.detail.formatter=format(data.ratio,"##")+"%"
        formatter="Used:"+data.used+"<br/>Ratio:"+format(data.ratio,"##.0")+"%";
      }
      return {
        tooltip: {
          formatter: formatter
        },
        series: [
          series
        ]
      }
    }
  }
}
</script>
<style>
.server-chart{
  width: 350px;
  height: 300px;
  display: inline-block;
}
</style>
